<template>
	<view class="contain">
		<uni-header></uni-header>
		<view>
			<swiper style="height: 600upx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="w100 h100 bg-img" :style="item | bgimg()"></view>
				</swiper-item>
			</swiper>
			
			<view class="padding-lr15 ">
				<view class="f16-size f-w-500 margin-t12">{{info.name}}</view>
				<view class="flex f-a-c margin-t4">
					<view class="flex f-a-c text-price  f18-size f-w-500 margin-r6">{{info.amount}}</view>
					<view class="t-color-9 del-line text-price">{{info.amount*1.2 | price}}</view>
				</view>
				<view class="b-bottom-b margin-t12"></view>
			</view>
			
			<!-- <view class="padding-lr15">
				<view class="f16-size f-w-500 margin-t16">Color</view>
				<view class="flex f-w">
					<view v-for="(item,index) in 10" :class="index==0 ?'b-color-3': 'b-color-e'" class="flex f-s-0 f-a-c f15-size h-28 margin-t10 margin-r10  padding-lr10">2112</view>
				</view>
				<view class="f16-size f-w-500 margin-t16">Size</view>
				<view class="flex f-w">
					<view v-for="(item,index) in 10" :class="index==0 ?'b-color-3': 'b-color-e'" class="flex f-s-0 f-a-c f15-size h-28 margin-t10 margin-r10  padding-lr10">2112</view>
				</view>
			</view> -->
			
			<!-- <view class="bg-color-e h-10 margin-t20"></view> -->
			
			<view class="padding-lr15 ">
				<view class="f16-size f-w-500 margin-t12">Details</view>
				<view class="padding-10"></view>
				<image v-for="(item,index) in goods" :key="index" class="w100" :src="item" mode="widthFix"></image>
			</view>
			
		</view>
		
		
		<b-button>
			<view class="flex f-a-c f-j-s ">
				<view class="flex b-color-e3 h-28">
					<view @click="add('-')" class="flex f-a-c f-j-c w-24 f-w-b b-right-e">-</view>
					<view class="flex f-a-c f-j-c padding-lr2 w-28 b-right-e">{{num}}</view>
					<view @click="add('+')" class="flex f-a-c f-j-c w-24 f-w-b">+</view>
				</view>
				<view @click="buy" class="bg-color-0 flex f-a-c f-j-c h-36 t-color-w padding-lr12">
					<image class="w-18 margin-r6" src="../../static/images/car_w.png" mode="widthFix"></image>
					<text>Buy One</text>
				</view>
			</view>
		</b-button>
	</view>
</template>
<style scoped>
@import '@/static/css/index/index.css';
</style>
<script>
	const $ = require('@/utils/api.js');
	let self = this;
	export default {
		components: {},
		data() {
			return {
				id: 1000000,
				banner: [],
				goods: [],
				info: '',
				num: 1,
			};
		},
		onLoad: function(options) {
			self = this;
			uni.removeStorageSync('orderInfo');
			if(options.aid || options.cid) {
				const obj = {
					aid: options.aid ?options.aid : '',
					cid: options.cid ? options.cid : '',
					campaign_id: options.campaign_id ? options.campaign_id : '',
					ttclid: options.ttclid ? options.ttclid : '',
				}
				uni.setStorageSync('orderInfo',obj);
			}
			this.init();
		},
		onShow() {
		},
		methods: {
			buy() {
				if(this.info == ''){return}
				this.go('/pages/index/orderSure?id='+this.id+'&num='+this.num+'&amount='+this.info.amount);
			},
			add(type) {
				if(type == '-') {
					if(Number(this.num) > 1) {
						this.num -= 1;
					}
				}else{
					this.num += 1;
				}
			},
			getDetail() {
				$.ajax({
					url: '/v1/tk_shop/goods/detail',
					data: {
						goods_id: this.id
					},
					method: 'POST',
					success(res) {
						self.info =  res.data;
						self.banner = self.info.carousel ? self.info.carousel : [];
						self.goods = self.info.detail ? self.info.detail : [];
					}
				})
			},
			init() {
				this.getDetail();
			},
		},
		computed: {},
		created() {
		},
		mounted() {},
		destroyed() {},
		onPullDownRefresh() {
		},
		onReachBottom() {
			
		}
	}
</script>